<template>
	<div
		:class="[
			'app-editor-container',
			'app-mob-slider',
			`app-mob-slider-${name}`,
		]"
	>
		<van-slider
			v-bind="$attrs"
			class="app-mob-slider-range"
			:range="range"
			v-model="curValue"
			:disabled="disabled"
			@change="handleChange"
		>
		</van-slider>
	</div>
</template>
<script lang="ts" setup>
import { sliderProps } from './slider';
import { IEvent } from '@/core';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'editor-event', value: IEvent<string>): void;
}
const props = defineProps(sliderProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig, valueType, valueSeparator } = useEditorTypeParams();
validateConfig();
const curValue = ref();

watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		if (props.range) {
			//使用范围滑动条
			if (Array.isArray(props.value)) {
				curValue.value =  props.value;
			} else if (typeof props.value === 'string') {
				curValue.value = props.value.split(valueSeparator || ',');
			} else {
				curValue.value = [0, 0];
			}
		} else {
			if (!props.value) {
				curValue.value = 0;
			} else {
				curValue.value = props.value;
			}
		}
		
	},
	{ immediate: true }
);

const handleChange = (value: any) => {
	let _value = value;
	if (props.range && valueType === 'SIMPLE') {
		_value = value.join(valueSeparator || ',');
	}
	emit('editor-event', {
		name: `${props.name}`,
		action: 'valueChange',
		data: _value,
	});
};
</script>
